<template>
    <div>
        <!-- 售票明细报表 -->
        <div class="container">
            <!-- 标题栏 -->
            <div class="headstyple">
                <el-row>
                    <el-col :span="16" class="ticket-title">报表>售票模块-售票明细报表</el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="check">
                            <img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询

                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_xin_default.png" alt="" class="btn-img">新窗口

                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_dayin_default.png" alt="" class="btn-img">直接打印

                        </button>
                    </el-col>
                    <el-col :span="2">
                        <button class="check-btn form-btn" @click="">
                            <img src="../../assets/imgs/operation_btn_icon_daochu_default.png" alt="" class="btn-img">导出

                        </button>
                    </el-col>
                </el-row>
            </div>
            <div class="bottom-container">
                <el-form :model="formList" :inline="true" class="ticketForm" id="summarySheet">
                    <div>
                        <el-form-item label="售票时间起">
                            <el-date-picker type="datetime" size="mini" class="minipt" default-time="00:00:00"
                                            v-model="formList.starDate" value-format="yyyy-MM-dd-HH:mm:ss"></el-date-picker>
                            止
                            <el-date-picker type="datetime" size="mini" class="minipt" default-time="23:59:59"
                                            v-model="formList.endDate" value-format="yyyy-MM-dd-HH:mm:ss"></el-date-picker>
                            <span><img src="../../assets/imgs/operation_bg_sousuo_default.png" alt="" class="btn-time"
                                       @click="sysdateinfo"></span>
                        </el-form-item>
                        <el-form-item label="售票员">
                            <span style="padding: 4px 30px; background: gray; vertical-align: middle; margin-right: 1px; border-radius: 5px;">{{operaterno}}</span>
                            <el-autocomplete v-model="formList.operater" size="mini" class="inp"
                                             :fetch-suggestions="querySearchUser" @select="handleSelect">
                                <template slot-scope="{ item }">
                                    <div>[{{ item.code }}] {{ item.value }}</div>
                                </template>
                            </el-autocomplete>
                        </el-form-item>
                        <el-form-item label="类型">
                            <el-select size="mini" class="inp" v-model="formList.selltype" @change="selltypechange">
                                <el-option
                                        v-for="item in selltypelist"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value+ ';' +item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item label="票状态">
                            <el-select v-model="formList.ticketstatus" size="mini" class="inp" @change="ticketstatuschange">
                                <el-option
                                        v-for="item in ticketstatuslist"
                                        :key="item.value"
                                        :label="item.key"
                                        :value="item.value+ ';' +item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="支付方式">
                            <el-select v-model="formList.getPayType" size="mini" class="inp" @change="PayTypechange">
                                <el-option
                                        v-for="item in getPayTypelist"
                                        :key="item.value"
                                        :label="item.key"
                                        :value="item.value+ ';' +item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="售票点">
                            <el-select v-model="formList.sellstation" size="mini" class="minipt" @change="sellsta">
                                <el-option
                                        v-for="item in orgnameList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id+ ',' +item.name">
                                    <span style="float: left">{{ item.no }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="乘车点">
                            <el-select v-model="formList.takestation" size="mini" class="minipt" @change="takesta">
                                <el-option
                                        v-for="item in orgnameList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id+ ',' + item.name">
                                    <span style="float: left">{{ item.no }}</span>
                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>

                    </div>
                </el-form>
            </div>
        </div>

        <!--遮罩层-->
        <div class='popContainer' v-show="modelShow"></div>
        <!--弹窗页面部分-->
        <div class="management-modal-win" v-show="modelShow">
            <!-- 标题 -->
            <el-row>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">{{modalTitle}}</div>
                    <div class="rf close" @click="closeModual()">X</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="msg-win">
                        <!-- 修改弹窗 -->
                        <div>
                            <el-row class="driver-container">
                                <el-col>
                                    <div>
                                        <el-table style="width: 100%" :data="DatetableData" height="290px" @row-dblclick="sysdate">
                                            <el-table-column type="index" width="20px"></el-table-column>
                                            <el-table-column prop="date_name" label="名称"></el-table-column>
                                            <el-table-column prop="date_start" label="起始日期"></el-table-column>
                                            <el-table-column prop="date_end" label="结束日期"></el-table-column>
                                            <el-table-column prop="beizhu" label="备注"></el-table-column>
                                        </el-table>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <button class="check-btn rf" @click="closeformwindows"><img
                            src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt=""
                            class="btn-img">取消
                    </button>
                </el-col>
            </el-row>
        </div>
        <!--  -->
        <div id="test1" v-html="htmlreport" class="containerhtml"> </div>

    </div>
</template>
<script>
    import "../../assets/js/jquery.js";
    import FormData from "../../components/common/form";
    import TableData from "../../components/common/tableData";
    import qs from "qs";

    export default {

        data() {
            return {
                formList: {
                    starDate: "",
                    endDate: "",
                    orgname: "",
                    operater: "",
                    selltype:"",
                    ticketstatus:"",
                    getPayType:"",

                },
                selltypelist:[
                    {
                        value: '',
                        label: '不限'
                    },
                    {
                        value: '-CS',
                        label: '窗口售票'
                    },
                    {
                        value: '-CQ',
                        label: '窗口取票'
                    },
                    {
                        value: '-ZS',
                        label: '自助机售票'
                    },
                    {
                        value: '-ZQ',
                        label: '自助机取票'
                    },
                ],
                orgnameList: [],
                operaterList: [],
                operaterno: "",
                ticketstatuslist:[],
                getPayTypelist:[],

                modelShow: false,
                modalTitle: "",
                DatetableData:"",

                sellitemid :"",
                sellitemname :"",
                takeitemid :"",
                takeitemname :"",
                operaitemid :"",
                operaitemname :"",

                selltypeitemid :"",
                selltypeitemname :"",

                ticketstatusitemid :"",
                ticketstatusitemname :"",

                PayTypeitemid :"",
                PayTypeitemname :"",

                htmlreport:"",

            };
        },

        methods: {
            //类型回调
            selltypechange(item){
                console.log(item);
                this.selltypeitemid = item.split(';')[0];
                this.selltypeitemname = item.split(';')[1];
            },
            //票状态回调
            ticketstatuschange(item){
                console.log(item);
                this.ticketstatusitemid = item.split(';')[0];
                this.ticketstatusitemname = item.split(';')[1];
            },
            //支付方式回调
            PayTypechange(item){
                console.log(item);
                this.PayTypeitemid = item.split(';')[0];
                this.PayTypeitemname = item.split(';')[1];
            },
            //售票点回调
            sellsta(item){
                console.log(item);
                this.sellitemid = item.split(',')[0];
                this.sellitemname = item.split(',')[1];

            },
            //乘车点回调
            takesta(item){
                console.log(item);
                this.takeitemid = item.split(',')[0];
                this.takeitemname = item.split(',')[1];

            },
            //打单员回调
            handleSelect(item) {
                console.log(item);
                this.operaterno = item.code;
                this.operaitemid = item.prop;
                this.operaitemname = item.value;
            },
            //机构列表
            loadbusstation(){
                this.$http
                    .post("/sys/org/nameList")
                    .then(data => {
                        this.orgnameList = data.data;
                        console.log(data)
                    })
            },
            //
            createFilter(queryString) {
                return arr => {
                    return arr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
                };
            },
            // 打单员自动补全
            querySearchUser(queryString, cb) {
                var arr = this.operaterList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //打单员请求
            loadUser() {
                var arr = [];
                this.$http
                    .post("/sys/user/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.name, prop: c.id, code: c.no});
                        }
                    });
                return arr;
            },
            //票状态列表
            loadticketstatus(){
                this.$http
                    .post("/tks/common/getStatusDef")
                    .then(data => {
                        this.ticketstatuslist = data.data;
                    })
            },
            //支付方式列表
            loadgetPayType(){
                this.$http
                    .post("/common/constant/getPayType")
                    .then(data => {
                        this.getPayTypelist = data.data;
                    })
            },

            //获取弹窗
            sysdateinfo(){
                this.getsysdate();
                this.modelShow = true;
                this.modalTitle = "选择日期";
                console.log(this.modelShow);
            },
            //关闭弹窗
            closeModual() {
                this.modelShow = false;
            },
            //关闭弹窗
            closeformwindows() {
                this.modelShow = false;
            },
            //获取弹窗时间数据
            getsysdate(){
                this.DatetableData=[];
                this.$http
                    .post("/sys/customdatescope/list")
                    .then(data => {
                        console.log(data.data);
                        console.log(data.data.list);
                        for(var item of data.data.list){
                            this.DatetableData.push({
                                id:item.id,
                                date_name:item.name,
                                date_start:item.start_date,
                                date_end:item.end_date,
                                beizhu:item.remark,
                            })

                        }
                    })
            },
            //双击获取自定义日期
            sysdate(row, event){
                console.log(row.id);
                console.log(this.DatetableData);
                this.formList.starDate = row.date_start + " 00:00:00";
                this.formList.endDate = row.date_end + " 23:59:59";
                this.modelShow = false;
            },
            //时间处理,获取当天时间
            todayfunction(){
                let now = new Date();
                var nowday = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
                this.nowtoday = nowday;
                console.log(nowday);
                this.formList.starDate = nowday + " 00:00:00";
                this.formList.endDate = nowday + " 23:59:59";
            },

            //encodeURI 编码
            check(){
                //通过select的机构选择框，获取其名称
                let parm = '[{"text":"售票时间起:","field":"be_sale","op":"dge","value":"'+this.formList.starDate+'","valuename":"'+this.formList.starDate+'"},' +
                    '{"text":"止:","field":"ed_sale","op":"dle","value":"'+this.formList.endDate+'","valuename":"'+this.formList.endDate+'"},' +
                    '{"text":"类型:","field":"tks_sale_type","op":"eq","value":"'+this.selltypeitemid+'","valuename":"'+this.selltypeitemname+'"},' +
                    '{"text":"售票员:","field":"seller_id","value":"'+this.operaitemid+'","valuename":"'+this.operaitemname+'"},' +
                    '{"text":"票状态:","field":"t_status","op":"eq","value":"'+this.ticketstatusitemid+'","valuename":"'+this.ticketstatusitemname+'"},' +
                    '{"text":"售票点:","field":"create_org","op":"eq","value":"'+this.sellitemid+'","valuename":"'+this.sellitemname+'"},' +
                    '{"text":"乘车点:","field":"broading_org","op":"eq","value":"'+this.takeitemid+'","valuename":"'+this.takeitemname+'"},' +
                    '{"text":"支付方式:","field":"pay_type","op":"eq","value":"'+this.PayTypeitemid+'","valuename":"'+this.selltypeitemname+'"}]';
                let sqlparm = '{"be_sale":"'+this.formList.starDate+'","ed_sale":"'+this.formList.endDate+'",' +
                    '"tks_sale_type":"'+this.selltypeitemid+'","seller_id":"'+this.operaitemid+'","seller_name":"'+this.operaitemname+'",' +
                    '"t_status":"'+this.ticketstatusitemid+'","create_org":"'+this.sellitemid+'",' +
                    '"broading_org":"'+this.takeitemid+'","pay_type":"'+this.PayTypeitemid+'"}';
                //编码
                let encodeparm = encodeURIComponent(parm);
                let encodesqlparm = encodeURIComponent(sqlparm);
                //执行查询
                this.getreport(encodeparm, encodesqlparm);

            },
            //查询
            getreport(type1, type2){
                let rpT = "%E5%94%AE%E7%A5%A8%E6%A8%A1%E5%9D%97";
                let rpN = "%E5%94%AE%E7%A5%A8%E6%98%8E%E7%BB%86%E6%8A%A5%E8%A1%A8";
                this.$http
                    .get(
                        '/reports',
                        {
                            params: {
                                rpType: rpT,
                                rpName: rpN,
                                protype: 98,
                                rpparajson: type1,
                                sqlparajson: type2,
                            }
                        }
                    )
                    .then(data => {
                        console.log(data.data)

                        this.htmlreport = data.data;
                    })
            },

        },
        watch: {

            //侦听打单员，并转换code
            "formList.operater": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.formList.operater == "") {
                        this.operaterno = "";
                    }
                },
                deep: true
            },

        },
        mounted(){
            this.loadbusstation();
            this.operaterList = this.loadUser();
            this.todayfunction();
            this.loadticketstatus();
            this.loadgetPayType();

        },
    }
</script>
<style scoped>
    @import url('../../assets/css/Report/sellSumDetails.css');

    .check-btn {
        width: 100px;
    }
    .el-form--inline .el-form-item {
        margin-right: 30px;
    }
    #summarySheet .el-date-editor.el-input{
        width:174px!important;
    }



</style>
